<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:replace="authority/common/currency/head"/>
</head>

<body class="childrenBody" padding10>

<div id="seach-container"></div>
<table id="dynamic_table_column_table" lay-filter="dynamic_table_column_table"
       class="layui-hide zsa-auto-height"></table>

<script type="text/html" id="sys_toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_search">搜索</button>
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_refresh">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="sys_toolbar_add">
        <i class="layui-icon" style="line-height:30px">&#xe654;</i>添加
    </button>
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="regenerate"><i
            class="layui-icon">&#xe702;</i>重新生成
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batch_del"><i
            class="layui-icon">&#xe640;</i>批量删除
    </button>
</script>
<!--操作-->
<script type="text/html" id="toolDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script th:replace="authority/common/currency/footer"></script>
<script>
    layui.extend({
        complexSearch: 'complexSearch/complexSearch', // {/}的意思即代表采用自有路径，即不跟随 base 路径
        initTable: 'initTable/initTable'
    });
    layui.use(['form', 'initTable', 'complexSearch', 'lutil'], function () {
        var table = layui.table
            , form = layui.form
            , complexSearch = layui.complexSearch
            , layer = layui.layer
            , lutil = layui.lutil;
        var defaultSearchs = [{
            field: "dynamicTableId",
            value: "[[${dynamicTableId}]]"
        }];
        // 搜索框
        var search = complexSearch.render({
            container: "#seach-container",
            isDynamic: false,
            submit: false,
            returnFormat: {
                dataTypeName: 'type'
            },
            data: [
                {
                    field: 'type',
                    formulas: ['=', 'in', 'notin'],
                    title: '列类型',
                    dataType: 'string',
                    editType: 'select',
                    options: [{key: '请选择', value: ''},
                        {key: '常规列', value: 'normal'},
                        {key: '复选框列', value: 'checkbox'},
                        {key: '单选框列', value: 'radio'},
                        {key: '序号列', value: 'numbers'},
                        {key: '空列', value: 'space'}
                    ]
                },
                {field: 'title', title: '表头名称', editType: 'text', dataType: 'string', formulas: ['<->']},
                {
                    field: 'state',
                    formulas: ['='],
                    dataType: 'int',
                    title: '状态',
                    editType: 'select',
                    options: [{key: '请选择', value: ''}, {key: '有效', value: '1'}, {key: '无效', value: '0'}]
                }
            ],
            search: function (data) {
                var concat = data.concat(defaultSearchs);
                var thisTable = layui.pageObtainTable('dynamic_table_column_table');
                thisTable && thisTable.query({searchs: concat.length > 0 ? JSON.stringify(concat) : ''});
            }
        });

        var height = $(window).height() - $('#seach-container').outerHeight() - 40,
            height_value = parseInt(height) > 300 ? parseInt(height) : 300;

        layui.page_table_examples.push(table.render({
            elem: '#dynamic_table_column_table',
            url: content_path + 'authority/dynamic_table_column/list.do',
            height: height_value,
            toolbar: '#sys_toolbarDemo',
            title: '表头列表',
            cellMinWidth: '100',
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            where: {searchs: JSON.stringify(defaultSearchs)},
            initSort: {
                field: 'sort' //排序字段，对应 cols 设定的各字段名
            },
            cols: [
                [//标题栏
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'sort', title: '序号', fixed: 'left', sort: true, width: 80},
                    {field: 'id', title: 'ID', fixed: 'left', hide: true, width: 100},
                    {field: 'typeName', title: '表头类型', fixed: 'left', align: 'center', event: 'row-click', width: 100},
                    {field: 'title', title: '表头名称', fixed: 'left', width: 100},
                    {field: 'dmlColumnLabel', title: '字段名', width: 100},
                    {field: 'dmlColumnId', title: '字段ID', hide: true, width: 100},
                    {field: 'width', title: '列宽', align: 'center', event: 'row-click', width: 100},
                    {field: 'minWidth', title: '最小宽度', event: 'row-click', width: 100},
                    {
                        field: 'fixed', title: '固定列', align: 'center', event: 'row-click', width: 80,
                        templet: function (d) {
                            return d.fixed === 'null' || d.fixed === undefined ? '' : d.fixed;
                        }
                    },
                    {
                        field: 'hide', title: '默认隐藏', align: 'center', event: 'row-click', width: 80,
                        templet: function (d) {
                            return d.hide === 'true' ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge layui-bg-gray">否</span>';
                        }
                    },
                    {
                        field: 'totalRow', title: '合计', align: 'center', event: 'row-click', width: 80,
                        templet: function (d) {
                            return d.totalRow === 'true' ? '<span class="layui-badge layui-bg-green">开启</span>' : '<span class="layui-badge layui-bg-gray">关闭</span>';
                        }
                    },
                    {
                        field: 'disSort', event: 'row-click', align: 'center', title: '排序', width: 80,
                        templet: function (d) {
                            return d.disSort === 'true' ? '<span class="layui-badge layui-bg-green">开启</span>' : '<span class="layui-badge layui-bg-gray">关闭</span>';
                        }
                    },
                    {
                        field: 'unresize', event: 'row-click', align: 'center', title: '禁止拖拽', minWidth: 90,
                        templet: function (d) {
                            return d.unresize === 'true' ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge layui-bg-gray">否</span>';
                        }
                    },
                    {field: 'style', event: 'row-click', title: '样式', minWidth: 150},
                    {field: 'align', event: 'row-click', title: '文字排列', align: 'center', width: 90},
                    {field: 'clospan', event: 'row-click', title: '所占列数', align: 'center', width: 90},
                    {field: 'rowspan', event: 'row-click', title: '所占行数', align: 'center', width: 90},
                    {field: 'templet', event: 'row-click', title: '列模板', minWidth: 150},
                    {field: 'toolbar', event: 'row-click', title: '操作工具条', minWidth: 150},
                    {
                        field: 'state',
                        event: 'row-click',
                        title: '状态',
                        width: 90,
                        sort: true,
                        fixed: 'right',
                        align: 'center',
                        templet: function (d) {
                            return '<span' + (d.state === 1 ? ' style="color:green;" >正常' : 'style="color:#eee;" >无效') + '</span>';
                        }
                    },
                    {field: 'cz', title: '操作', width: 150, toolbar: "#toolDemo", fixed: 'right', align: 'center'}
                ]
            ]
        }));


        //头工具栏事件
        table.on('toolbar(dynamic_table_column_table)', function (obj) {
            var thisTable = layui.pageObtainTable('dynamic_table_column_table');
            var checks = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'sys_toolbar_refresh':
                    thisTable && thisTable.refresh();
                    break;
                case  'sys_toolbar_search':
                    search.submit();
                    break;
                case 'sys_toolbar_add':
                    lutil.open_iframe("新增DML", content_path + "authority/dynamic_table_column/edit.html?dynamicTableId=[[${dynamicTableId}]]", null, null, function () {
                        thisTable && thisTable.refresh();
                    });
                    break;
                case 'regenerate':
                    lutil.my_confirm("警告", "重新生成字段可能会覆盖当前设置（请慎用）?", function () {
                        var loding = layer.load(2, {shade: [0.3, '#eee']});
                        ajaxRequestByCsrf(content_path + "authority/dynamic_table_column/regenerate.do", {dynamicTableId: '[[${dynamicTableId}]]'}, function (res) {
                            lutil.success_msg(res.message);
                            thisTable && thisTable.refresh();
                        }, null, function (res) {
                            layer.close(loding);
                        });
                    });
                    break;
                case 'batch_del':
                    lutil.my_confirm("确定要批量删除这" + checks.data.length + "列，将不可恢复？？", function () {
                        var ids = [];
                        $.each(checks.data, function (i, e) {
                            ids.push(e['id']);
                        });
                        var loding = layer.load(2, {shade: [0.3, '#eee']});
                        ajaxRequestByCsrf(content_path + "authority/dynamic_table_column/del.do", {id: ids.join(",")}, function (res) {
                            lutil.success_msg(res.message);
                            thisTable && thisTable.refresh();
                        }, null, function () {
                            layer.close(loding);
                        })
                    });
                    break;
            }
        });

        table.on('sort(dynamic_table_column_table)', function (obj) {
            var thisTable = layui.pageObtainTable('dynamic_table_column_table');
            thisTable && thisTable.sort(obj);
        });

        table.on('tool(dynamic_table_column_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var thisTable = layui.pageObtainTable('dynamic_table_column_table');
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') {
                lutil.open_iframe("编辑DML列 - " + data['sort'], content_path + "authority/dynamic_table_column/edit.html?dynamicTableId=[[${dynamicTableId}]]&id=" + data['id'], null, null, function () {
                    thisTable && thisTable.refresh();
                });
            }

            if (layEvent === 'del') {
                lutil.my_confirm("确定要删除DML列“" + data['name'] + "” ，将不可恢复？？", function () {
                    var loding = layer.load(2, {shade: [0.3, '#eee']});
                    ajaxRequestByCsrf(content_path + "authority/dynamic_table_column/del.do", {id: data['id']}, function (res) {
                        lutil.success_msg(res.message);
                        thisTable && thisTable.refresh();
                    }, null, function () {
                        layer.close(loding);
                    })
                })
            }
        });

    })
</script>
</body>
</html>